<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      #canvas {
          background: #f1f1f1;
      }
  </style>
</head>
<body>
<div>
  <canvas id="canvas" width="1000" height="600"></canvas>
</div>
</body>
<script>
  window.onload = ()=>{
      const canvas = document.getElementById('canvas')
      const ctx = canvas.getContext('2d')
      //  文字阴影

      async function drawTextShadow() {
          var ctx = document.getElementById('canvas').getContext('2d');
          ctx.scale(5,5)

          const loadFonts = async () => {
              let loaders = []
              const font65 = new FontFace('Slideqiuhong', `url(./YanShiQiuHongKai.ttf)`)
              document.fonts.add(font65)
              loaders.push(font65.load())
              return await Promise.all(loaders)
          }

          await loadFonts()


          canvas.style.letterSpacing = '6px';

          ctx.lineWidth = 7;
          ctx.lineJoin = 'round'
          ctx.font = 'bold 40px Slideqiuhong';
          ctx.strokeStyle = '#D0021B'
          ctx.strokeText('工作汇报', 5, 50)

          ctx.lineWidth = 6;
          ctx.lineJoin = 'round'
          ctx.font = 'bold 40px Slideqiuhong';
          ctx.strokeStyle = '#fff'
          ctx.strokeText('工作汇报', 5, 50)



          ctx.fillStyle = "#D0021B";
          ctx.fillText("工作汇报", 5, 50);


      }

      drawTextShadow()
  }
</script>
</html>
